import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool _isLandscape = false;

  // 旋转屏幕的方法
  void _rotateScreen() {
    if (_isLandscape) {
      // 切换到竖屏
      SystemChrome.setPreferredOrientations([
        DeviceOrientation.portraitUp,
        DeviceOrientation.portraitDown,
      ]);
    } else {
      // 切换到横屏
      SystemChrome.setPreferredOrientations([
        DeviceOrientation.landscapeLeft,
        DeviceOrientation.landscapeRight,
      ]);
    }

    setState(() {
      _isLandscape = !_isLandscape;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[50],
      body: CustomScrollView(
        slivers: [
          // 顶部横幅区域
          SliverToBoxAdapter(
            child: Container(
              margin: const EdgeInsets.all(16),
              height: 120,
              decoration: BoxDecoration(
                gradient: const LinearGradient(
                  colors: [Color(0xFF0066FF), Color(0xFF00A3FF)],
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                ),
                borderRadius: BorderRadius.circular(12),
              ),
              child: Stack(
                children: [
                  Positioned(
                    right: 16,
                    top: 16,
                    child: Icon(
                      Icons.rocket_launch_outlined,
                      color: Colors.white.withOpacity(0.8),
                      size: 60,
                    ),
                  ),
                  const Positioned(
                    left: 20,
                    top: 30,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          '欢迎使用鸿蒙服务',
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 18,
                            fontWeight: FontWeight.w600,
                          ),
                        ),
                        SizedBox(height: 8),
                        Text(
                          '探索更多智能体验',
                          style: TextStyle(
                            color: Colors.white70,
                            fontSize: 14,
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),

          // 旋转屏幕按钮区域
          SliverToBoxAdapter(
            child: Container(
              margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
              child: Card(
                elevation: 2,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(12),
                ),
                child: Padding(
                  padding: const EdgeInsets.all(16),
                  child: Column(
                    children: [
                      const Text(
                        '屏幕方向控制',
                        style: TextStyle(
                          fontSize: 16,
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                      const SizedBox(height: 12),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: [
                          // 旋转屏幕按钮
                          _buildRotateButton(),
                          // 重置屏幕方向按钮
                          _buildResetButton(),
                        ],
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),

          // 快捷服务网格
          SliverPadding(
            padding: const EdgeInsets.all(16),
            sliver: SliverGrid(
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 4,
                crossAxisSpacing: 16,
                mainAxisSpacing: 16,
                childAspectRatio: 0.9,
              ),
              delegate: SliverChildBuilderDelegate(
                (context, index) {
                  final services = [
                    {'icon': Icons.device_hub, 'label': '设备'},
                    {'icon': Icons.cloud, 'label': '云服务'},
                    {'icon': Icons.security, 'label': '安全'},
                    {'icon': Icons.settings, 'label': '设置'},
                    {'icon': Icons.storage, 'label': '存储'},
                    {'icon': Icons.backup, 'label': '备份'},
                    {'icon': Icons.update, 'label': '更新'},
                    {'icon': Icons.help_outline, 'label': '帮助'},
                  ];

                  return _buildServiceItem(
                    services[index]['icon'] as IconData,
                    services[index]['label'] as String,
                  );
                },
                childCount: 8,
              ),
            ),
          ),
        ],
      ),
    );
  }

  // 构建旋转屏幕按钮
  Widget _buildRotateButton() {
    return Column(
      children: [
        Container(
          width: 60,
          height: 60,
          decoration: BoxDecoration(
            color: _isLandscape ? Colors.orange[100] : Colors.blue[50],
            shape: BoxShape.circle,
            border: Border.all(
              color: _isLandscape ? Colors.orange : Colors.blue,
              width: 2,
            ),
          ),
          child: IconButton(
            icon: Icon(
              _isLandscape ? Icons.screen_rotation : Icons.screen_lock_rotation,
              color: _isLandscape ? Colors.orange : Colors.blue,
              size: 30,
            ),
            onPressed: _rotateScreen,
          ),
        ),
        const SizedBox(height: 8),
        Text(
          _isLandscape ? '横屏模式' : '竖屏模式',
          style: TextStyle(
            fontSize: 12,
            fontWeight: FontWeight.w500,
            color: _isLandscape ? Colors.orange : Colors.blue,
          ),
        ),
        const SizedBox(height: 4),
        Text(
          _isLandscape ? '点击切换竖屏' : '点击切换横屏',
          style: const TextStyle(
            fontSize: 10,
            color: Colors.grey,
          ),
        ),
      ],
    );
  }

  // 构建重置屏幕方向按钮
  Widget _buildResetButton() {
    return Column(
      children: [
        Container(
          width: 60,
          height: 60,
          decoration: BoxDecoration(
            color: Colors.grey[100],
            shape: BoxShape.circle,
            border: Border.all(
              color: Colors.grey,
              width: 2,
            ),
          ),
          child: IconButton(
            icon: const Icon(
              Icons.screen_rotation_alt,
              color: Colors.grey,
              size: 30,
            ),
            onPressed: _resetScreenOrientation,
          ),
        ),
        const SizedBox(height: 8),
        const Text(
          '重置方向',
          style: TextStyle(
            fontSize: 12,
            fontWeight: FontWeight.w500,
            color: Colors.grey,
          ),
        ),
        const SizedBox(height: 4),
        const Text(
          '恢复自动旋转',
          style: TextStyle(
            fontSize: 10,
            color: Colors.grey,
          ),
        ),
      ],
    );
  }

  // 重置屏幕方向到自动
  void _resetScreenOrientation() {
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
      DeviceOrientation.portraitDown,
      DeviceOrientation.landscapeLeft,
      DeviceOrientation.landscapeRight,
    ]);

    setState(() {
      _isLandscape = false;
    });

    // 显示重置成功的提示
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: const Text('已恢复自动屏幕旋转'),
        duration: const Duration(seconds: 2),
        action: SnackBarAction(
          label: '确定',
          onPressed: () {},
        ),
      ),
    );
  }

  Widget _buildServiceItem(IconData icon, String label) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
          width: 50,
          height: 50,
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(12),
            boxShadow: [
              BoxShadow(
                color: Colors.black.withOpacity(0.05),
                blurRadius: 8,
                offset: const Offset(0, 2),
              ),
            ],
          ),
          child: Icon(
            icon,
            color: Colors.blue[600],
            size: 24,
          ),
        ),
        const SizedBox(height: 8),
        Text(
          label,
          style: const TextStyle(
            fontSize: 12,
            fontWeight: FontWeight.w500,
          ),
        ),
      ],
    );
  }

  @override
  void dispose() {
    super.dispose();
  }
}
